<template>
  <view class="page">
    <!-- 用户列表 -->
    <view class="user-list">
      <view class="user-item" v-for="(user, index) in users" :key="index">
        <view class="user-info">
          <image class="avatar" :src="user.avatar || 'https://admin.cqycgyl.com/uploads/20250516/59fb513ac7f2dd68d68aa30e6ef4553d.png'"  @error="onImageError"/>
          <view class="information">
            <view class="text">
				<text class="name" >{{ user.name || '未知用户' }}</text>
				<view class="user_id">
				  <text class="id">ID:</text>
				  <text class="value">{{ user.id }}</text>
				</view>
			</view>
            <view class="join-time">加入时间：{{ user.join_time }}</view>
          </view>
        </view>
        <view class="action">
          <text class="button" @click="gotoShopDetail(user.id)">查看商家</text>
        </view>
      </view>
    </view>
    <view style="padding-top: 200rpx;" v-if="users.length === 0">
    	<u-empty text="暂无推荐列表" mode="order"></u-empty>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://admin.cqycgyl.com',
				users: [],
				loading: false,
				error: ''
			}
		},
		onShow(){
			this.loadUsers();
		},
		methods: {
		gotoShopDetail(id){
			let user = this.users.find(item=>item.id==id);
			if(user&& user.store_status==1){
				uni.navigateTo({
					url: `/pages/shop/detail?id=${user.shop_id}`
				})
			}else{
				uni.showToast({
					title: '商家未入驻',
					icon: 'none'
				})
			}
		},

			async loadUsers(){
				this.loading = true;
				this.error = '';
				try {
					const res = await this.$u.api.recommend.getRecommendList();
					
					// 把加入时间转换一下格式
					this.users = (res.data || []).map((user,index) => ({
						...user,
						join_time: this.formatTime(user.join_time),
						expire_time: user.expire_time ? this.formatTime(user.expire_time) : null,
						recommend_code: user.recommend_code || null,
						avatar: user.avatar || 'https://admin.cqycgyl.com/uploads/20250807/5a023ae2a6b2f3ef116789aeda37fb5e.png'
					}));	
					console.log('user',this.users)
				} catch (err) {
					console.error('加载用户列表失败:', err);
					this.error = '加载失败，请重试';
				} finally {
					this.loading = false;
				}
			},
			
			// 格式化时间
			formatTime(time) {
				if (!time) return '未知';
				try {
					const date = new Date(time);
					return date.toLocaleDateString('zh-CN');
				} catch (e) {
					return time;
				}
			},
			
			// 图片加载失败处理
			onImageError(e) {
				console.log('图片加载失败:', e);
			},
			
			// 用户点击事件
			onUserClick(user) {
				console.log('点击用户:', user);
			}
		}
	}
</script>
<style>
/* 页面整体 */
.page {
  background-color: #f5f5f5;
  padding: 30rpx;
}


/* 用户列表 */
.user-list {
  background-color: #F6F8F7;;
}

.user-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 34rpx;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-info{
	display: flex;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  margin-right: 10px;
}

.information .text{
  display: flex;
  align-items: flex-end;
  margin-bottom: 16rpx;
}

.name {
  font-weight: bold;
  font-size: 28rpx;
  color: #333333;
  margin-right: 15rpx;
}

.user_id {
  width: 142rpx;
  background: rgba(241,99,37,0.1);
  border-radius: 4rpx;
  border: 1rpx solid #F16325;
  text-align: center;
}

.user_id text {
  font-weight: 400;
  font-size: 22rpx;
  color: #F16325;
}

.join-time {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.action {
  display: flex;
  align-items: center;
}

.button {
  width: 174rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 36rpx 36rpx 36rpx 36rpx;
  border: 2rpx solid #999999;   
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  
}
</style>
